<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    // 着色器 ！！！
    // 着色器让开发者自己去编写一段程序，用来代替固定渲染管线，来处理图像的渲染
    // 1.顶点着色器——用来描述顶点的特性——通过计算获取位置信息
    //   顶点是指二维三维空间中的一个点，可以理解为一个个坐标
    // 2.片元着色器——进行逐片元处理程序——通过计算获取颜色信息
    //   片元可以理解为一个个像素
    // 着色器工作流程
    // JavaScript读取相关着色器信息，传递给webgl并进行使用
    // 创建着色器源码
    // 顶点着色器
    const VERTEX_SHADER_SORUCE = `
    // 必须存在main函数
    void main(){
      // 要绘制的点的坐标  x,y,z,w(齐次坐标x/w,y/w,z/w)
      gl_Position = vec4(0.0,0.0,0.0,1.0);
      // 点的大小
      gl_PointSize = 30.0;
    }
  `;
    const FRAGEMNT_SHADER_SOURCE = `
    void main(){
      // 绘制点的颜色 r,g,b,a
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `;
    // 封装前
    // 创建着色器
    const vertexShader  = gl.createShader(gl.VERTEX_SHADER);
    const fragmentShader  = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertexShader, VERTEX_SHADER_SORUCE) //指定着色器源码
    gl.shaderSource(fragmentShader, FRAGEMNT_SHADER_SOURCE) //指定着色器源码

    // 编译着色器
    gl.compileShader(vertexShader)
    gl.compileShader(fragmentShader)

    // 创建程序对象
    const program  = gl.createProgram();

    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)

    gl.linkProgram(program)

    gl.useProgram(program)

    // 封装后
    // initShader(gl,VERTEX_SHADER_SORUCE,FRAGEMNT_SHADER_SOURCE)

    // 执行绘制
    // 要绘制的图形，从哪个开始，使用几个顶点
    gl.drawArrays(gl.POINTS, 0, 1);
    // gl.drawArrays(gl.LINES, 0, 1);   // 线段，至少2个点
    // gl.drawArrays(gl.TRIANGLES, 0, 1);  //三角形，至少3个点

    // 整体流程
    // 1.获取canvas元素 2.获取webgl绘图上下文 3.初始化顶点着色器源程序 4.初始化片元着色器源程序
    // 创建顶点着色器-创建片元着色器-关联着色器和着色器源码-编译着色器-创建program-关联着色器和program-使用program
    // 绘图

</script>